import React, { PureComponent } from 'react'

import './detail.scss'

interface Props {}

interface State {
  art: object
  showSkeleton: boolean
}

import { getArtDetail, viewArt } from '../../api/Article'
import dayjs from 'dayjs'
import { Anchor, Skeleton } from 'antd'

// import art from './data.json'

export default class Detail extends PureComponent<Props, State> {
  state = {
    art: {},
    showSkeleton: true,
  }

  componentDidMount() {
    let id = (this.props as any).match.params.id
    getArtDetail(id).then((art) => {
      art.updatedTime = dayjs(art.updatedAt).format('YYYY年MM月DD日')
      this.setState(
        {
          art: { ...art },
        },
        () => {
          console.log(this.state.art)
        }
      )
    })
    viewArt(id)
  }

  render() {
    const art: any = this.state.art
    return (
      <>
        <div className="detail">
          <div
            className="header"
            style={{ backgroundImage: `url('${art.cover}')` }}
          >
            <div className="art-info">
              <h2 className="title">{art.title}</h2>
              <p className="extra">
                <span className="category">
                  {' '}
                  <i className="iconfont iconzhekou"></i>
                  {art.category}
                </span>
                <span className="author">
                  {' '}
                  <i className="iconfont iconwode"></i>
                  {art.author}
                </span>
                <span className="comm">
                  {' '}
                  <i className="iconfont iconspeechbubble"></i> {art.comment}
                </span>
                <span className="watch">
                  {' '}
                  <i className="iconfont iconchakan"></i> {art.watch}
                </span>
                <span className="date">
                  {' '}
                  <i className="iconfont iconshizhong"></i>{' '}
                  {dayjs(art.createdAt).format('YYYY-MM-DD')}
                </span>
              </p>
              {/* <div className="skeleton">
                <Skeleton active paragraph={{ rows: 2 }} />
              </div> */}
            </div>
            <svg
              className="wave-svg"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 1440 260"
            >
              <path
                id="page-header-svg-path"
                fillOpacity="1"
                d="M0,256L60,245.3C120,235,240,213,360,218.7C480,224,600,256,720,245.3C840,235,960,181,1080,176C1200,171,1320,213,1380,234.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
              ></path>
            </svg>
          </div>
          <div className="art_content">
            <article dangerouslySetInnerHTML={{ __html: art.html }}></article>
            {/* <Skeleton active paragraph={{ rows: 20 }} /> */}
          </div>
          <div className="art-foot">
            <div className="post_tags">
              {art.tags
                ? art.tags.map((el: string) => {
                    return <label>{el}</label>
                  })
                : null}
            </div>
            {/* <div className="post_tool">
            <span className="btn">打赏</span>
            <span className="btn">点赞</span>
            <span className="btn">分享</span>
          </div> */}
          </div>
        </div>
      </>
    )
  }
}
